<template>
  <!--模版语法-->
  <!--把值變成動態的-->
  <span>{{ msg }}</span>
  <div v-html="msg1"></div>
  <!--把属性变成动态的-->
  <span v-bind:class="msg2">名字</span>
  <a v-bind:href="msg3">百度</a>

  <!--事件-->
  <button v-on:click="showMsg">点我</button>
  <button @click="showMsg">再点试试</button>
  <a :href="msg3" @click.prevent="showMsg">百度</a>
  <!-- 阻止默认事件 -->
  <a :href="msg3" @click.prevent="showMsg">百度</a>
  <!-- 阻止事件冒泡 -->
  <div class="box" @click="boxClick">
    <div class="box1" @click.stop="box1Click"></div>
  </div>
  <!-- 一次性事件 -->
  <button @click.once="showMsg">您只能点一次</button>
  <!-- 只有点自己才触发 不会触发子元素 -->
  <div class="box" @click.self="boxClick">
    <div class="box1" @click="box1Click">子元素</div>
  </div>
  <!-- 先触发父元素 再触发子元素 -->
  <div class="box" @click.capture="boxClick">
    <div class="box1" @click="box1Click">先父后子</div>
  </div>
  <!-- 滚动条 -->
  <div class="heightBox" @scroll="boxScroll">
    <div class="conBox"></div>
  </div>

  <!-- 以下是按键修饰符 -->
  <input type="text" @keydown.enter="KeyMsg" />
  <input type="text" @keydown.ctrl.shift="KeyMsg" />
  <!-- 以下是鼠标修饰符-->
  <div class="box" @mouseenter="boxMove" @mouseleave="boxLeave">鼠标移入移出</div>
</template>

<script>
export default {
  name: 'AboutView',
  data() {
    return {
      msg: 'AboutView',
      msg1: '<h1>向太飛是我幺兒</h1>',
      msg2: 'name',
      msg3: 'https://cn.bing.com',
    }
  },
  methods: {
    showMsg() {
      alert('向太飞是个大傻逼')
    },
    boxClick() {
      alert('父框被点击了')
    },
    box1Click() {
      alert('子框被点击了')
    },
    boxScroll() {
      console.log('滚动了')
    },
    KeyMsg() {
      alert('按下了回车键')
    },
    boxMove() {
      console.log('鼠标进入')
    },
    boxLeave() {
      console.log('鼠标离开')
    },
  },
}
</script>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: red;
}
.box1 {
  width: 100px;
  height: 100px;
  background-color: blue;
}
.heightBox {
  width: 200px;
  height: 200px;
  background-color: palegreen;
  overflow-y: auto;
}
.conBox {
  width: 100px;
  height: 800px;
  background-color: rgb(251, 255, 192);
}
</style>
